<template>
  <div class="register-container">
    <div class="register-box">
      <div class="register-header">
        <h2>智能教学助手</h2>
        <p>用户注册</p>
      </div>
      
      <div class="register-form">
        <div class="form-item role-select">
          <label>注册身份</label>
          <el-select v-model="registerForm.role" placeholder="请选择注册身份" style="width: 100%">
            <el-option label="教师" value="teacher" />
            <el-option label="学生" value="student" />
          </el-select>
        </div>

        <div class="form-item">
          <label>姓名</label>
          <input 
            type="text" 
            v-model="registerForm.name" 
            placeholder="请输入真实姓名"
          />
        </div>
        
        <div class="form-item">
          <label>{{ registerForm.role === 'teacher' ? '工号' : registerForm.role === 'student' ? '学号' : '账号' }}</label>
          <input 
            type="text" 
            v-model="registerForm.loginId" 
            :placeholder="registerForm.role === 'teacher' ? '请输入工号' : registerForm.role === 'student' ? '请输入学号' : '请输入账号'"
          />
        </div>
        
        <div class="form-item">
          <label>手机号</label>
          <input 
            type="text" 
            v-model="registerForm.phone" 
            placeholder="请输入手机号"
          />
        </div>
        
        <div class="form-item">
          <label>邮箱(选填)</label>
          <input
            type="email"
            v-model="registerForm.email"
            placeholder="请输入邮箱"
          />
        </div>

        <div class="form-item" v-if="registerForm.role === 'student'">
          <label>班级</label>
          <input
              type="text"
              v-model="registerForm.className"
              placeholder="请输入班级"
          />
        </div>

<!--        <div class="form-item">-->
<!--          <label>班级</label>-->
<!--          <input -->
<!--            type="text" -->
<!--            v-model="registerForm.className" -->
<!--            placeholder="请输入班级"-->
<!--          />-->
<!--        </div>-->
        
        <div class="form-item">
          <label>密码</label>
          <div class="password-input">
            <input 
              :type="showPassword ? 'text' : 'password'" 
              v-model="registerForm.password" 
              placeholder="请输入密码"
            />
            <span 
              class="toggle-password" 
              @click="showPassword = !showPassword"
            >
              <i :class="showPassword ? 'eye-open' : 'eye-close'"></i>
            </span>
          </div>
        </div>
        
        <div class="form-item">
          <label>确认密码</label>
          <input 
            type="password" 
            v-model="registerForm.confirmPassword" 
            placeholder="请再次输入密码"
          />
        </div>
        
        <div class="form-actions">
          <button 
            class="primary-btn" 
            @click="handleRegister" 
            :disabled="isLoading"
          >
            {{ isLoading ? '注册中...' : '注册' }}
          </button>
          
          <div class="action-links">
            <a href="#" @click.prevent="goToLogin">已有账号？立即登录</a>
          </div>
        </div>
      </div>
      
      <div v-if="errorMessage" class="error-message">
        {{ errorMessage }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const router = useRouter()
const isLoading = ref(false)
const errorMessage = ref('')
const showPassword = ref(false)

const registerForm = reactive({
  role: '',
  name: '',
  loginId: '',
  phone: '',
  email: '',
  className: '',
  password: '',
  confirmPassword: ''
})

const validateForm = () => {
  if (!registerForm.role) {
    errorMessage.value = '请选择注册身份'
    return false
  }
  
  if (!registerForm.name) {
    errorMessage.value = '请输入姓名'
    return false
  }
  
  if (!registerForm.loginId) {
    errorMessage.value = registerForm.role === 'teacher' ? '请输入工号' : registerForm.role === 'student' ? '请输入学号' : '请输入账号'
    return false
  }
  
  if (!registerForm.phone) {
    errorMessage.value = '请输入手机号'
    return false
  }
  
  if (!/^1[3-9]\d{9}$/.test(registerForm.phone)) {
    errorMessage.value = '请输入正确的手机号'
    return false
  }
  
  // if (!registerForm.email) {
  //   errorMessage.value = '请输入邮箱'
  //   return false
  // }
  
  // if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(registerForm.email)) {
  //   errorMessage.value = '请输入正确的邮箱地址'
  //   return false
  // }

  if (registerForm.role === 'student' && !registerForm.className) {
    errorMessage.value = '请输入班级'
    return false
  }
  
  if (!registerForm.password) {
    errorMessage.value = '请输入密码'
    return false
  }
  
  if (registerForm.password.length < 6) {
    errorMessage.value = '密码长度不能少于6位'
    return false
  }

  console.log('密码:', registerForm.password);
  console.log('确认密码:', registerForm.confirmPassword);
  if (registerForm.password !== registerForm.confirmPassword) {
    errorMessage.value = '两次输入的密码不一致'
    return false
  }

  
  return true
}

const handleRegister = async () => {
  if (!validateForm()) {
    return
  }
  
  try {
    isLoading.value = true
    errorMessage.value = ''
    
    const role = registerForm.role
    if (!role || (role !== 'teacher' && role !== 'student')) {
      errorMessage.value = '请选择正确的注册身份'
      return
    }
    
    const response = await axios.post('/api/auth/register', {
      role: role,
      name: registerForm.name,
      loginId: registerForm.loginId,
      phone: registerForm.phone,
      email: registerForm.email,
      className: registerForm.className,
      password: registerForm.password,
      confirmPassword: registerForm.confirmPassword
    })
    
    if (response.data.success) {
      ElMessage.success('注册成功，请登录')
      router.push('/login')
    } else {
      errorMessage.value = response.data.message || '注册失败，请重试'
    }
  } catch (error) {
    console.error('注册错误:', error)
    if (error.response) {
      errorMessage.value = error.response.data?.message || `注册失败 (${error.response.status})`
    } else if (error.request) {
      errorMessage.value = '服务器无响应，请检查网络连接'
    } else {
      errorMessage.value = '注册请求发送失败，请稍后重试'
    }
  } finally {
    isLoading.value = false
  }
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.register-box {
  width: 400px;
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.register-header {
  text-align: center;
  margin-bottom: 30px;
}

.register-header h2 {
  color: #333;
  margin-bottom: 5px;
}

.register-header p {
  color: #666;
  font-size: 16px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.form-item input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-item input:focus {
  border-color: #1890ff;
  outline: none;
}

.password-input {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
}

.form-actions {
  margin-top: 24px;
}

.primary-btn {
  width: 100%;
  padding: 10px;
  background-color: #1890ff;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.primary-btn:hover {
  background-color: #40a9ff;
}

.primary-btn:disabled {
  background-color: #1890ff;
  opacity: 0.7;
  cursor: not-allowed;
}

.action-links {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.action-links a {
  color: #1890ff;
  text-decoration: none;
}

.error-message {
  margin-top: 16px;
  color: #f5222d;
  text-align: center;
}

.eye-open::before {
  content: '👁️';
}

.eye-close::before {
  content: '👁️‍🗨️';
}

.role-select {
  margin-bottom: 20px;
}
</style>